<template>
  <div class="home-container">
    <el-card class="page-header">
      <div class="header-content">
        <p class="p">关于</p>
        <p style="margin-top: 10px;">这是一个基于Vue + MongoDB的后台管理系统</p>
      </div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { mapState } from 'vuex'

export default {
  name: 'Home',
  data () {
    return {
      totalUsers: 1258,
      newUsers: 36,
      totalVisits: 8562,
      activeUsers: 482,
      currentDate: '',
      hotUsersList: [
        { rank: 1, name: '张三', visits: 1256, level: 'VIP' },
        { rank: 2, name: '李四', visits: 985, level: 'VIP' },
        { rank: 3, name: '王五', visits: 875, level: '普通用户' },
        { rank: 4, name: '赵六', visits: 762, level: '普通用户' },
        { rank: 5, name: '钱七', visits: 658, level: '普通用户' }
      ],
      visitTrendData: {
        days: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        visits: [320, 380, 420, 460, 520, 680, 720]
      }
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo
    })
  },
  mounted () {
    this.initDate()
    this.initVisitTrendChart()
    // 监听窗口大小变化，重新渲染图表
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.handleResize)
    if (this.visitTrendChart) {
      this.visitTrendChart.dispose()
    }
  },
  methods: {
    initDate () {
      const now = new Date()
      const year = now.getFullYear()
      const month = now.getMonth() + 1
      const day = now.getDate()
      const weekDays = ['日', '一', '二', '三', '四', '五', '六']
      const weekDay = weekDays[now.getDay()]
      this.currentDate = `${year}年${month}月${day}日 星期${weekDay}`
    },
    initVisitTrendChart () {
      this.visitTrendChart = echarts.init(this.$refs.visitTrendChart)
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: this.visitTrendData.days
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '访问量',
            type: 'line',
            stack: '总量',
            areaStyle: {
              opacity: 0.3
            },
            emphasis: {
              focus: 'series'
            },
            lineStyle: {
              width: 3,
              color: '#1890ff'
            },
            itemStyle: {
              color: '#1890ff'
            },
            data: this.visitTrendData.visits
          }
        ]
      }
      this.visitTrendChart.setOption(option)
    },
    handleResize () {
      if (this.visitTrendChart) {
        this.visitTrendChart.resize()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.home-container {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

.page-header {
  margin-bottom: 20px;
  .header-content {
    text-align: left;
    h1 {
      font-size: 24px;
      font-weight: 600;
      color: #333;
      margin-bottom: 10px;
    }
    .p {
      font-size: 16px;
      color: #000;
    }
    p {
      font-size: 14px;
      color: #666;
    }
  }
}

.statistics-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.stat-card {
  border-radius: 8px;
  background: #fff;
  transition: all 0.3s ease;
  cursor: pointer;
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
  .stat-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    .stat-info {
      .stat-number {
        font-size: 28px;
        font-weight: 600;
        color: #333;
        margin-bottom: 8px;
      }
      .stat-label {
        font-size: 14px;
        color: #666;
      }
    }
    .stat-icon {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: #ecf6ff;
      display: flex;
      align-items: center;
      justify-content: center;
      i {
        font-size: 24px;
        color: #1890ff;
      }
    }
  }
}

.charts-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.chart-card {
  height: 400px;
  display: flex;
  flex-direction: column;
  .chart-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    .chart {
      width: 100%;
      height: 100%;
    }
  }
}

.hot-users {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .el-table {
    flex: 1;
    margin-top: 0;
    .el-table__header {
      background: #fafafa;
    }
    .el-table__body {
      overflow-y: auto;
    }
  }
}

@media screen and (max-width: 1200px) {
  .charts-container {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 768px) {
  .statistics-cards {
    grid-template-columns: 1fr;
  }
  .page-header {
    .header-content {
      h1 {
        font-size: 20px;
      }
    }
  }
}
</style>
